<template>
  <div class="login_container">
    <!-- title：对话框左上角的标题 v-model：控制对话框的显示与隐藏 -->
    <el-dialog v-model="userStore.visible" title="用户登录" @close="close">
      <!-- 对话框身体部分的结构 -->
      <div class="content">
        <el-row>
          <!-- 左侧结构：手机号码登录、微信扫一扫登录 -->
          <div class="login">
            <div v-show="scene===0">
              <el-form :rules="rules" ref="form" :model="loginParam">
                <el-form-item prop="phone">
                  <el-input placeholder="请输入手机号码" v-model="loginParam.phone" :prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input placeholder="请输入手机验证码" v-model="loginParam.code" :prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button :disabled="!isPhone||flag?true:false" @click="getCode">
                    <CountDown v-if="flag" :flag="flag" @getFlag="getFlag" />
                    <span v-else>获取验证码</span>
                  </el-button>
                </el-form-item>
                <el-button
                  type="primary"
                  class="btn"
                  :disabled="!isPhone||loginParam.code.length<6?true:false"
                  @click="login"
                >用户登录</el-button>
              </el-form>
              <div class="bottom" @click="changeScene">
                <p>微信扫码登录</p>
                <svg
                  t="1714891178986"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1503"
                  width="24"
                  height="24"
                >
                  <path
                    d="M512 1024C229.23 1024 0 794.77 0 512S229.23 0 512 0s512 229.23 512 512-229.23 512-512 512z m107.91-626.371H640c-20.09-94.744-115.566-162.962-225.304-162.962-124.002 0-222.696 86.04-222.696 198.607 0 65.097 34.572 115.492 89.43 156.94l-23.114 71.12 77.995-41.448a354.748 354.748 0 0 0 77.97 11.8h20.114a133.608 133.608 0 0 1-5.851-47.47 193.122 193.122 0 0 1 57.466-134.412 181.37 181.37 0 0 1 133.096-52.175h0.804z m-115.273-56.296c15.848 0 28.696 14.288 28.696 31.915s-12.848 31.915-28.696 31.915c-17.652 1.95-33.402-12.313-35.304-31.94 0-22.284 17.457-31.89 34.719-31.89h0.585z m-171.032 63.878c-17.555 1.463-33.012-12.653-34.938-31.89 1.926-19.212 17.383-33.329 34.938-31.89 16.042 0 29.062 14.287 29.062 31.915 0 17.603-13.02 31.89-29.062 31.89zM832 574.805c0-92.233-90.136-169.472-192-169.472-107.764 0-192 77.24-192 169.448 0 92.257 84.456 169.496 192 169.496a264.24 264.24 0 0 0 66.828-11.873L767.586 768l-17.408-59.538c49.42-35.596 81.017-83.286 81.017-133.852l0.805 0.195zM573.562 554.52c-10.435 0-18.895-9.484-18.895-21.187s8.46-21.211 18.895-21.211c11.727-1.39 22.308 7.997 23.771 21.114-1.39 13.214-11.97 22.698-23.771 21.284z m128 0.098c-10.435 0-18.895-9.509-18.895-21.212 0-11.751 8.46-21.26 18.895-21.26 11.727-1.414 22.308 7.997 23.771 21.139-2.194 12.921-12.58 22.04-24.259 21.333h0.488z"
                    fill="#0ABC64"
                    p-id="1504"
                  />
                </svg>
              </div>
            </div>
            <div class="webchat" v-show="scene===1">
              <div id="login_container"></div>
              <div class="phone" @click="handler">
                <p>手机验证码登录</p>
                <svg
                  t="1715310381104"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1525"
                  width="16"
                  height="16"
                >
                  <path
                    d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                    p-id="1526"
                    fill="#606266"
                  />
                </svg>
              </div>
            </div>
          </div>
          <div class="leftContent">
            <div class="top">
              <div class="item">
                <img src="@/assets/images/code_app.png" />
                <svg
                  t="1714891608790"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1751"
                  id="mx_n_1714891608795"
                  width="18"
                  height="18"
                >
                  <path
                    d="M512 1024C229.23 1024 0 794.77 0 512S229.23 0 512 0s512 229.23 512 512-229.23 512-512 512z m107.91-626.371H640c-20.09-94.744-115.566-162.962-225.304-162.962-124.002 0-222.696 86.04-222.696 198.607 0 65.097 34.572 115.492 89.43 156.94l-23.114 71.12 77.995-41.448a354.748 354.748 0 0 0 77.97 11.8h20.114a133.608 133.608 0 0 1-5.851-47.47 193.122 193.122 0 0 1 57.466-134.412 181.37 181.37 0 0 1 133.096-52.175h0.804z m-115.273-56.296c15.848 0 28.696 14.288 28.696 31.915s-12.848 31.915-28.696 31.915c-17.652 1.95-33.402-12.313-35.304-31.94 0-22.284 17.457-31.89 34.719-31.89h0.585z m-171.032 63.878c-17.555 1.463-33.012-12.653-34.938-31.89 1.926-19.212 17.383-33.329 34.938-31.89 16.042 0 29.062 14.287 29.062 31.915 0 17.603-13.02 31.89-29.062 31.89zM832 574.805c0-92.233-90.136-169.472-192-169.472-107.764 0-192 77.24-192 169.448 0 92.257 84.456 169.496 192 169.496a264.24 264.24 0 0 0 66.828-11.873L767.586 768l-17.408-59.538c49.42-35.596 81.017-83.286 81.017-133.852l0.805 0.195zM573.562 554.52c-10.435 0-18.895-9.484-18.895-21.187s8.46-21.211 18.895-21.211c11.727-1.39 22.308 7.997 23.771 21.114-1.39 13.214-11.97 22.698-23.771 21.284z m128 0.098c-10.435 0-18.895-9.509-18.895-21.212 0-11.751 8.46-21.26 18.895-21.26 11.727-1.414 22.308 7.997 23.771 21.139-2.194 12.921-12.58 22.04-24.259 21.333h0.488z"
                    fill="#333333"
                    p-id="1752"
                  />
                </svg>
                <p>微信扫一扫关注</p>
                <p>“快速预约挂号”</p>
              </div>
              <div class="item">
                <img src="@/assets/images/code_login_wechat.png" />
                <svg
                  t="1714891788128"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3862"
                  width="18"
                  height="18"
                >
                  <path
                    d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                    p-id="3863"
                    fill="#333333"
                  />
                </svg>
                <p>扫一扫下载</p>
                <p>“预约挂号APP”</p>
              </div>
            </div>
            <div class="bottom">
              <p>一医通官方指定平台</p>
              <p>快速挂号 安全放心</p>
            </div>
          </div>
        </el-row>
      </div>
      <template #footer>
        <el-button type="primary" @click="closeDialog">关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>
  
<script lang="ts" setup>
// @ts-ignore
import { ref, reactive, computed, watch } from "vue";
// @ts-ignore
import { User, Lock } from "@element-plus/icons-vue";
// @ts-ignore
import useUserStore from "@/store/modules/user.ts";
// 引入倒计时组件
import CountDown from "../countdown/index.vue";
import { ElMessage } from "element-plus";
// @ts-ignore
import { reqWxLogin } from "@/api/hospital"
// @ts-ignore
import type { WXLoginResponseData } from "@/api/hospital/type"
import {useRouter,useRoute} from "vue-router"
let router=useRouter()
let route=useRoute()
// 定义一个响应式数据控制倒计时组件的显示与隐藏
let flag = ref<boolean>(false);
const userStore = useUserStore();
// 控制登录界面 0代表手机号码登录 1代表微信扫码登录
let scene = ref<number>(0);
// 切换微信扫码登录
const changeScene = async() => {
  scene.value = 1;
  let redirect_URL = encodeURIComponent(window.location.origin+'/wxlogin')
  // 发请求获取微信扫描二维码需要的参数
  let result:WXLoginResponseData=await reqWxLogin(redirect_URL)
  // 生成微信扫码登录的二维码页面
  // @ts-ignore
  new WxLogin({
    self_redirect: true,
    id: "login_container",
    appid: result.data.appid,
    scope: "snsapi_login",
    redirect_uri: result.data.redirectUri,
    state: result.data.state,
    style: "black",
    href: ""
  });
};
// 收集表单数据
let loginParam = reactive({
  phone: "",
  code: ""
});
// 计算当前表单元素收集的内容是否是手机号码格式
let isPhone = computed(() => {
  // 手机号码的正则表达式
  const reg = /1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}/;
  return reg.test(loginParam.phone);
});
// 获取验证码
const getCode = async () => {
  flag.value = true;
  // 通知pinia仓库存储获取到的验证码
  try {
    await userStore.getCode(loginParam.phone);
    loginParam.code = userStore.code;
  } catch (error) {
    // 获取验证码失败
    ElMessage({
      message: (error as Error).message,
      type: "warning"
    });
  }
};
// countdown组件传递过来的数据
const getFlag = (value: boolean) => {
  flag.value = value;
};
// 获取form组件实例
let form = ref<any>();
// 登录操作
const login = async () => {
  await form.value.validate();
  try {
    await userStore.userLogin(loginParam);
    // 关闭对话框
    userStore.visible = false;
    // 获取url的query参数
    let redirect=route.query.redirect
    if(redirect){
      router.push(redirect as string)
    }else{
      router.push('/home')
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: (error as Error).message
    });
  }
};
// 表单校验规则
const validatePhone = (rule: any, value: any, callback: any) => {
  const reg = /1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}/;
  if (reg.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的手机号码"));
  }
};
const validateCode = (rule: any, value: any, callback: any) => {
  if (/^\d{6}$/.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的验证码格式"));
  }
};
const rules = {
  phone: [{ validator: validatePhone, trigger: "blur" }],
  code: [{ validator: validateCode, trigger: "blur" }]
};
// 对话框关闭事件的回调
const close = () => {
  // 清空收集到的数据
  form.value.resetFields();
};
// 关闭窗口按钮的回调
const closeDialog = () => {
  userStore.visible = false;
  // 清空收集到的数据
  form.value.resetFields();
  userStore.clearUserInfo();
};
// 手机验证码登录
const handler=()=>{
  scene.value=0
}
// 监听场景的数据
watch(()=>scene.value,(val:number)=>{
  if(val===1){
    userStore.queryState()
  }
})
</script>
  
<style lang="scss" scoped>
.el-row {
  display: flex;
}
::v-deep(.el-dialog__footer) {
  padding-top: 0;
  padding-bottom: 5px;
}
::v-deep(.el-dialog) {
  width: 760px;
  border-radius: 5px;
}
.login_container {
  ::v-deep(.el-dialog__body) {
    border-top: 1px solid #eee;
  }
}
.content {
  margin-top: 20px;
  margin-bottom: 30px;
  .login {
    width: 340px;
    border: 1px solid #eee;
    .el-form {
      margin: 20px;
      .btn {
        width: 100%;
      }
    }
    .webchat {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 15px;
      .phone {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
        cursor: pointer;
        p{
          padding-bottom:5px;
        }
      }
    }
    .bottom {
      padding: 0 20px 30px;
      text-align: center;
      cursor: pointer;
      p {
        margin: 15px 0;
      }
    }
  }
  .leftContent {
    margin-left: 36px;
    .top {
      display: flex;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        &:first-child {
          margin-right: 46px;
        }
        img {
          width: 140px;
          height: 140px;
          margin-bottom: 22px;
        }
        p {
          line-height: 21px;
          font-size: 14px;
          color: #333;
        }
      }
    }
    .bottom {
      margin-top: 30px;
      text-align: center;
      font-size: 18px;
      line-height: 34px;
      font-style: italic;
      letter-spacing: 3px;
      color: #333;
      font-weight: 300;
    }
  }
}
</style>

